<template>
  <div>
    <el-card>
      <el-row>
        <el-button type="primary" :icon="Plus" @click="toAdd()" v-button="['api:design:designform:create']">
          新增
        </el-button>
      </el-row>
      <el-row>
        <el-table :data="tableList" :border="true" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="name" label="表单名称" />
          <el-table-column prop="sourceName" label="数据源" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="EditPen" @click="toEdit(scope.row)"
                v-button="['api:design:designform:update']">
                编辑
              </el-button>
              <el-button type="danger" :icon="Delete" @click="toDelete(scope.row)"
                v-button="['api:design:designform:delete']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="table-buttom-options">
          <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
            @change="query()"></Pagination>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import DesignFormApi, { DesignFormModel, DesignFormQuery } from '@/api/design/designForm';
import { Plus, Delete, EditPen, Search, Promotion } from "@element-plus/icons-vue";
import successMsg from '@/utils/successMsg';

//查询条件
const search = reactive<DesignFormQuery>({
  searchString: "",
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

const tableList = ref<DesignFormModel[]>([]);

onMounted(async () => {
  await query();
});

const query = async () => {
  const { dataList, totalCount } = await DesignFormApi.query(search);
  tableList.value = dataList;
  search.total = totalCount;
}

const router = useRouter(); //实例化路由
const toAdd = () => {
  router.push({ name: 'editForm', params: { type: 'create' } });
}

const toEdit = async (row: DesignFormModel) => {
  router.push({ name: 'editForm', params: { type: 'update', id: row.id } });
}

const toDelete = async (row: DesignFormModel) => {
  const { success, message } = await DesignFormApi.delete(row.id);
  successMsg(success, message, await query());
}
</script>

<style lang="scss" scoped></style>
